import * as React from 'react';
import { createElement } from 'react';
import './index.scss';

export interface DetailPanelProps {
  title?: string;
  content?: React.ReactNode;
  children?: React.ReactNode;
  visible?: boolean;
  onClose?: () => void;
  width?: number | string;
  height?: number | string;
  className?: string;
  style?: React.CSSProperties;
}

const DetailPanel: React.FC<DetailPanelProps> = function DetailPanel({
  title = '详情面板',
  content,
  children,
  visible = true,
  onClose,
  width = 400,
  height = 'auto',
  className = '',
  style = {},
  ...otherProps
}) {

  const handleClose = () => {
    if (onClose) {
      onClose();
    }
  };

  if (!visible) {
    return null;
  }

  // 优先使用children，如果没有children则使用content
  const panelContent = children || content;

  return createElement(
    'div',
    {
      className: `detail-panel ${className}`,
      style: {
        width: typeof width === 'number' ? `${width}px` : width,
        height: typeof height === 'number' ? `${height}px` : height,
        ...style
      },
      ...otherProps
    },
    createElement(
      'div',
      { className: 'detail-panel-header' },
      createElement('div', { className: 'detail-panel-title' }, title),
      onClose && createElement(
        'button',
        {
          className: 'detail-panel-close',
          onClick: handleClose,
          type: 'button'
        },
        '×'
      )
    ),
    createElement(
      'div',
      { className: 'detail-panel-content' },
      panelContent
    )
  );
};

DetailPanel.displayName = 'DetailPanel';
export default DetailPanel;